{% extends "common/base.html" %} 
{% block title %} {{ block.super }} | {{para.username}} {% endblock %}
{% block style %}{{ block.super }}<link href="/static/css/PeopleBase.css" rel="stylesheet" type="text/css" media="screen, projection" >{% endblock %}
{% block content %}
<div id="leftContainer">
    {% if para.isExists %}
    <div id="addLog">
        {% if para.isSelf %}
        <form method="post" action="." id="addLogForm">
        {% csrf_token %}
        <table>
            {{ para.form.as_table }}
        </table>
        <input type="submit" value="add" />
        </form>
        {% endif%}
    </div>
    <div id="logList">
        {% for log in para.Log_list %}
        <div class="logContent">
        <img style="width:20px;height:30px" class="face" name="{{ log.author }}" />
        <a href="/people/{{ log.author }}">{{ log.author }}</a>:<p>
            {{ log.content }}</p>
            </div>
        {% endfor %}
    </div>
    {% else %}
    <div>
        <p>
            This people is not exists yet, would you like to <a href="/signup/?username={{para.username}}">
                register this one</a>?</p>
    </div>
    {% endif %}
</div>
<div id="rightContainer">
    <div id="panel">
        {% if para.isAuthenticated %}
        <p>
            <a href="/logout">logout</a>
        </p>
        <h3>
            {{para.username}}</h1> {% if not para.isFriend and not para.isSelf and para.isAuthenticated %}
            <input type="button" id="btnFriendRelation" action="addFriend" value="add to friends" />
            {% endif%} {% if para.isFriend and not para.isSelf and para.isAuthenticated %}
            <input type="button" id="btnFriendRelation" action="removeFriend" value="remove form friends">
            {% endif%} {% else%}
            <p>
                If you already have an account, please <a href="/login">login</a> here.
            </p>
        {% endif %}
    </div>
</div>
{% endblock %} {% block javascript %}
<script type="text/javascript">
    $(document).ready(function () {
        var arr = new Array;
        for (var i = 0; i < $('.face').length; i++) {
            name = $('.face')[i].name;
            if (arr[name] == null) {
                arr[name] = name;
                try {
                    $.getJSON("/getface/?name=" + name, function (data) {
                        $(".face[name='" + data.name + "']").attr("src", data.src);
                    });
                }
                catch (e) {
                }
            }
        }

        $('#btnFriendRelation').bind('click', function () {
            action = $('#btnFriendRelation').attr("action");
            $('#btnFriendRelation').attr("disabled", "disabled");
            if (action == 'addFriend') {
                try {
                    $.getJSON("?action=addFriend&friend={{para.username}}", function (data) {
                        $('#btnFriendRelation').attr("value", "remove form friends");
                        $('#btnFriendRelation').attr("action", "removeFriend");
                    });
                }
                catch (e) {
                }
                finally {
                    $('#btnFriendRelation').attr("disabled", "");
                }
            }
            else {
                try {
                    $.getJSON("?action=removeFriend&friend={{para.username}}", function (data) {
                        $('#btnFriendRelation').attr("value", "add to friends");
                        $('#btnFriendRelation').attr("action", "addFriend");
                    });
                }
                catch (e) {
                }
                finally {
                    $('#btnFriendRelation').attr("disabled", "");
                }
            }
        });
    });
</script>
{% endblock %} 